<template>
	<view class="yingdidetail">
		<headertop title="营地详情" :back1="back1"></headertop>
		<up-swiper height="332" :list="list6" @change="e => currentNum = e.current" :autoplay="false"
			indicatorStyle="right: 20px">
			<template #indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</template>
		</up-swiper>
		<view class="yindifeibox">
			<image src="https://luying.hacuu.com/static/Group 11423@2x.png" class="yindifeibox_bakc" mode=""></image>
			<view class="btnyidi">
				营地费
			</view>
			<view class="jiageline">
				<view class="jiage">
					￥299.00
				</view>
				<view class="jiag1">
					押金：￥100.00
				</view>
			</view>
		</view>
		<view class="bottomcontent">
			<view class="line1">
				<image src="https://luying.hacuu.com/static/Rectangle 24421@2x.png" class="line1back" mode=""></image>
				<image src="https://luying.hacuu.com/static/Group 11424@2x.png" class="img1" mode=""></image>
				<view class="text">
					会员88折，非会员20元
				</view>
				<view class="lijikait">
					立即开通
				</view>
			</view>
			<view class="centerinfo">
				<view class="topline">
					<view class="title">
						山顶露营名称
					</view>
					<view class="icons">
						<image src="https://luying.hacuu.com/static/Frame@2x(35).png" class="icon1" mode=""></image>
						<image src="https://luying.hacuu.com/static/Frame@2x(36).png" class="icon2" mode=""></image>
					</view>
				</view>
				<view class="text1">
					这是一个内容描述，这是一个内容描述，这是一个内容描述，这是一个内容描述，这是一个内容描述，这是一个内容描述，
				</view>
				<view class="lianxibox">
					<image src="https://luying.hacuu.com/static/Group 11427@2x.png" class="lianxiboxback" mode="">
					</image>
					<view class="center">
						<view class="toline">
							<view class="leftbox">
								<image src="https://luying.hacuu.com/static/Frame@2x(29).png" class="icon" mode="">
								</image>
								<span>联系方式：13733709982</span>
							</view>
							<view class="lianxidizhi">
								联系地址
							</view>
						</view>
						<view class="botomline">
							<view class="leftbox">
								<view class="tline">
									<image src="https://luying.hacuu.com/static/Frame@2x(30).png" mode=""></image>
									<span style="z-index: 999;">河南省郑州市金水区经三路</span>
								</view>
								<view class="t2">
									距离您12.6km
								</view>
							</view>
							<image src="https://luying.hacuu.com/static/Group 11425@2x.png" class="dticon" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="jiange">

			</view>
			<view class="jibeninfo">
				<view class="jibeninfo_center">
					<view class="jibeninfo_center_title">
						<view class="bqt">

						</view>
						<view class="text">
							基本信息
						</view>
					</view>
					<view class="content">
						<view class="leftimagebox">
							<image src="https://luying.hacuu.com/static/Frame@2x(31).png" mode=""></image>
							<span>场地类型</span>
						</view>
						<view class="rightcontent">
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>草坪</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>泥地</span>
							</view>
						</view>
					</view>
					<view class="borderbottom">

					</view>
					<view class="content">
						<view class="leftimagebox">
							<image src="https://luying.hacuu.com/static/Frame@2x(33).png" mode=""></image>
							<span>营地要求</span>
						</view>
						<view class="rightcontent">
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>可篝火</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>可过夜</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>可明火</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>可篝火</span>
							</view>
							<view class="qinr" style="color:#C9CDD4 ;">
								<image src="https://luying.hacuu.com/static/Frame@2x(34).png" mode=""></image>
								<span>自带帐篷</span>
							</view>
							<view class="qinr" style="color:#C9CDD4 ;">
								<image src="https://luying.hacuu.com/static/Frame@2x(34).png" mode=""></image>
								<span>可停车</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>可篝火</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>可过夜</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>可明火</span>
							</view>
						</view>
					</view>
					<view class="openbox">
						展开
						<image src="https://luying.hacuu.com/static/Frame@2x(37).png" mode=""></image>
					</view>
					<view class="borderbottom">

					</view>
					<view class="content" style="margin-bottom:28rpx;">
						<view class="leftimagebox">
							<image src="https://luying.hacuu.com/static/Frame@2x(38).png" mode=""></image>
							<span>基础设施</span>
						</view>
						<view class="rightcontent">
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>WIFI</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>卫生间</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>厨房</span>
							</view>
							<view class="qinr">
								<image src="https://luying.hacuu.com/static/Frame@2x(32).png" mode=""></image>
								<span>自来水</span>
							</view>
							<view class="qinr" style="color:#C9CDD4 ;">
								<image src="https://luying.hacuu.com/static/Frame@2x(34).png" mode=""></image>
								<span>营位供电</span>
							</view>
							<view class="qinr" style="color:#C9CDD4 ;">
								<image src="https://luying.hacuu.com/static/Frame@2x(34).png" mode=""></image>
								<span>烧烤场</span>
							</view>
						</view>
					</view>
					<view class="jiange">

					</view>

				</view>
			</view>
			<view class="huanjingtupian">
				<view class="huanjingtupian_center">
					<view class="huanjingtupian_center_line">
						<view class="huanjingtupian_center_line_title">
							<view class="bqt">

							</view>
							<view class="text">
								环境图片
							</view>
						</view>
						<view class="huanjingtupian_center_line_more">
							<span>查看更多</span>
							<image src="https://luying.hacuu.com/static/Frame@2x(39).png" mode=""></image>
						</view>
					</view>
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
						<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="item in 5">
							<image src="https://luying.hacuu.com/static/image@2x(1).png" mode=""></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="" style="height: 190rpx;">

		</view>
		<view class="fixedbox">
			<view class="btn" @click="gopage">
				立即预约
			</view>
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onPageScroll
	} from "@dcloudio/uni-app";
	const currentNum = ref(0)
	const list6 = reactive([
		'https://luying.hacuu.com/static/Group 11407@2x.png',
		'https://luying.hacuu.com/static/Group 11407@2x.png',
		'https://luying.hacuu.com/static/Group 11407@2x.png',
	]);
	const back1 = ref('')
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = 'rgba(0,0,0,0.32)'
		} else {
			back1.value = ''
		}
	})

	function gopage() {
		uni.navigateTo({
			url: '/sub_index/index/AppointmentService'
		})
	}
</script>

<style lang="scss">
	@import '../../styles/yingdidetail.scss';
</style>